<template>
  <el-form-item class="edit-item edit-item-dropdown dropdown-normal">
    <slot name="label">
      <label>
        {{label}}
        <TooltipsCommon v-if="getTooltips" :tooltips="getTooltips"></TooltipsCommon>
      </label>
    </slot>

    <el-select v-model="modelValue" @change="onChange($event)" :placeholder="placeholder" :disabled="toBool(disabled)">
      <el-option
        v-for="(val, index) in valLists"
        :key="index"
        :label="val.name"
        :value="val.value"
        :disabled="toBool(val.disabled)">
      </el-option>
    </el-select>
    <el-button v-show="bIsBtn" @click.stop="handleChange('+')" style="margin-left: 6px !important;margin-right: 6px !important;"><i class="jy-icon-font-increase"></i></el-button>
    <el-button v-show="bIsBtn" @click.stop="handleChange('-')"><i class="jy-icon-font-reduction"></i></el-button>
  </el-form-item>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'DropdownNormal',
    emits: ['change','update:modelValue'],
    props: {
      modelValue: [String, Number],
      label: String,
      tooltips: String,
      placeholder: {
        type: String,
        default: '',
      },
      valLists: Array,
      bIsBtn: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: [Boolean, String],
        default: false,
      },
    },
    components: {
        TooltipsCommon: defineAsyncComponent(() => import('./comps/TooltipCommon.vue')),
    },
    computed: {
      getTooltips() {
        return !this.tooltips && this.placeholder ? this.placeholder : this.tooltips;
      }
    },
    methods: {
      handleChange(type) {
        if(type === '+') {
          this.modelValue = parseFloat(this.modelValue) + 1;
        }
        else if(type === '-') {
          this.modelValue = parseFloat(this.modelValue) - 1 < 12?12:parseFloat(this.modelValue) - 1;
        }
        // change
        this.onChange(this.modelValue);
      },
      onChange(val) {
        this.$emit('update:modelValue', val)
        this.$emit('change', val)
      },
      toBool(val) {
        return typeof val === "boolean" ? val
          : val === "true" ? true : false;
      }
    },
  }
</script>
